<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link  rel="stylesheet" type="text/css" href="../../css/resources/css/ext-all.css"></link>
<link  rel="stylesheet" type="text/css" href="../../css/Spinner.css"></link>
<script type="text/javascript" src="../../ext3.2.1/ext-base.js"></script>
<script type="text/javascript" src="../../ext3.2.1/ext-all.js"></script>
<script type="text/javascript" src="../../ext3.2.1/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/DateTimeField.js"></script>
<script type="text/javascript" src="../../js/Spinner.js"></script>
<script type="text/javascript" src="../../js/SpinnerField.js"></script>
<script type="text/javascript">
	Ext.onReady(function(){
		//提示时必须用
		Ext.QuickTips.init();
		var rForm;
		//查询条件：角色编号、角色名称
		var txt_roleCode = new Ext.form.TextField({
			id:'roleCode',
			name:'queryRole.roleCode',
			fieldLabel:'角色编号',
			width:100,
			allBlank:true,
			msgTarget:'side' //side  title under
		});
		var txt_roleName = new Ext.form.TextField({
			id:'roleName',
			name:'queryRole.roleName',
			fieldLabel:'角色名称',
			width:100,
			allBlank:true,
			msgTarget:'side'
		});
		//查询按钮		
		var btn_query = new Ext.Button({
			id:'btn_query',
			width:70,
			text:'查询',
			handler:function(){
				if(queryRForm.getForm().isValid()){
					queryRForm.form.submit({
						waitMsg:'正在查询数据......',
						url:'role/roleInfo_loadByPage.do',
						method:'post',
						params:{start:0,limit:10},
						failure:function(){
							Ext.Msg.alert("提示","查询数据失败，请重试。");
						},
						success:function(form,action){
							var result = Ext.util.JSON.decode(action.response.responseText);
							//从result中加载数据，false替换原来store中的数据,true是追加新数据
							store.loadData(result,false);
						}
					});
				}
			}
		});
		//查询窗口
		var queryRForm = new Ext.form.FormPanel({
			renderTo:'queryRForm',
			region:'north',
			border:false,
			//显示默认背景色
			frame:true,
			height:50,
			layout:'form',
			items:[{
				//行布局
				layout:'column',
				border:false,
				items:[{
					//一行内的每一列
					layout:'form',
					border:false,
					columnWidth:.2,
					items:[txt_roleCode]	
				},{
					layout:'form',
					columnWidth:.2,
					border:false,
					items:[txt_roleName]	
				},{
					layout:'form',
					border:false,
					columnWidth:.3,
					items:[btn_query]	
				}]
				
			}]
			
		});
		//查询条件：角色编号、角色名称
		
		
		//定义grid column：roleId、角色编号、角色名称
		var column = new Ext.grid.ColumnModel([
			{header:'roleId',hidden:true,width:150,dataIndex:'roleId',sortable:true},
			{header:'角色编号',width:150,dataIndex:'roleCode',sortable:true},
			{header:'角色名称',width:300,dataIndex:'roleName',sortable:true}
		]);
		//定义grid store 
		var store = new Ext.data.JsonStore({
			url:'role/roleInfo_loadByPage.do',
			root:'result',
			totalProperty:'totalProperty',
			//fields对应dataindex里的名字
			fields:['roleId','roleCode','roleName']
		});
		//定义grid
		var roleGrid = new Ext.grid.GridPanel({
			cm:column,
			renderTo:'roleGrid',
			region:'center',
			store:store,
			//获取可用高度 
			height:document.body.clientHeight,
			tbar:['->',{
						text:'查看',
						handler:function(){
							var record = roleGrid.getSelectionModel().getSelected();
							if(record == null){
								alert(" 请选择要查看的角色信息!");
							}else{
								Ext.Ajax.request({
										url:'role/roleInfo_getRoleInfo.do',
										params:{
											roleId:record.get("roleId")	
										},
										callback:function(options,success,response){
											//向服务器发送请求成功
											if(success){
												var result = Ext.util.JSON.decode(response.responseText);
												if(result.success){
													//遮盖父窗口，类似于模态窗口
													Ext.getBody().mask();
													showWindow("");
													//设置查看不可编辑
													Ext.getCmp("btn_confirm").setVisible(false);
													Ext.getCmp("roleCodeTxt").setDisabled(true);
													Ext.getCmp("roleNameTxt").setDisabled(true);
													//设置查看form显示值
													rForm.getForm().setValues({
														"role.roleCode":result.roleCode,
														"role.roleName":result.roleName
													});
											}else{
												alert("后台查询角色信息失败！");
											}
										}else{
											alert("发送查询角色信息请求失败！");
										}
									}
								});
							}
						}
					},{
						text:'增加',
						handler:function(){
							//遮盖父窗口，类似于模态窗口
							Ext.getBody().mask();
							showWindow("role/roleInfo_save.do");
						}
					},{
						text:'删除',
						handler:function(){
							var record = roleGrid.getSelectionModel().getSelected();
							if(record !=null){
								Ext.Ajax.request({
									url:"role/roleInfo_delete.do",
									params:{
										roleId:record.get("roleId")
									},
									success:function(){
										alert("删除成功");
										store.reload();
									},failure:function(){
										alert("删除失败");
									}
								});
							}else{
								alert("请选择要删除的信息");
							}
						}
					},{
						text:'修改',
						handler:function(){
							var record = roleGrid.getSelectionModel().getSelected();
							if(record != null){
								//遮盖父窗口，类似于模态窗口
								Ext.getBody().mask();
								showWindow("role/roleInfo_update.do");
								
								//设置查看form显示值
								rForm.getForm().setValues({
									"role.roleCode":record.get("roleCode"),
									"role.roleName":record.get("roleName"),
									"role.roleId": record.get("roleId")
								});
								
							}else{
								alert("请选择要修改的角色信息！");
								Ext.getBody().unmask();
							}
						}
					}
			],
			bbar:new Ext.PagingToolbar({
				  pageSize : 10, //每页显示几条
				  store : store,
				  beforePageText:"当前第",   
		          afterPageText:"页，共{0}页",   
		          lastText:"尾页",   
		          nextText :"下一页",   
		          prevText :"上一页",   
		          firstText :"首页",                           
		          displayInfo:true, 
		          displayMsg:'显示第{0}条数据到{1}条数据,一共有{2}条', 
		          emptyMsg:'没有记录'
			})
		});
		store.load({params:{start:0,limit:10}});
	
		//显示窗口，窗口中包含一个form,form中包含一些元素
		function showWindow(urlStr){
			var roleCodeTxt = new Ext.form.TextField({
				id:'roleCodeTxt',
				name:'role.roleCode',
				fieldLabel:'角色编号',
				width:150,
				allowBlank:false,
				msgTarget:'side',
				blankText:'角色编号不能为空'
			});
			var roleNameTxt = new Ext.form.TextField({
				id:'roleNameTxt',
				name:'role.roleName',
				fieldLabel:'角色名称',
				width:150,
				allowBlank:false,
				msgTarget:'side',
				blankText:'角色名称不能为空'
			});
			//roleId
			var idText=new Ext.form.TextField({
				hidden:true,
				width:100,
				name:'role.roleId'
				
			});
			//创建一个form
			rForm = new Ext.form.FormPanel({
				frame:true,
				border:false,
				width:260,
				height:150,
				items:[roleCodeTxt,idText,roleNameTxt],
				buttons:[{
					id:'btn_confirm',
					text:'确定',
					handler:function(){
						if(rForm.getForm().isValid()){
							rForm.form.submit({
								waitMsg:'正在提交数据.....',
								url:urlStr,
								method:'post',
								failure:function(){
									alert("操作失败请重试！");
								},
								success:function(form,action){
									var result = Ext.util.JSON.decode(action.response.responseText);
									win.close();
									store.reload();
									Ext.getBody().unmask();
								}
							});
						}
					}
				}]
			}); 
			//创建一个window用于承装form
			var win = new Ext.Window({
				title:'角色信息',
				items:[rForm],
				width:280,
				xtype:'form',
				x:100,
				y:50,
				//窗口是否可以改变大小
				resizable:false,
				//窗口是否可拖拽移动
				draggable:false,
				//窗口销毁前使父窗口显示可编辑。变成不是遮盖状态
				listeners:{'beforedestroy':function(){Ext.getBody().unmask();}}
				//listeners:{'beforedestroy':function(){Ext.getBody().unmask();}}
			});
			//显示窗口
			win.show();
		}
		
		//创建窗口唯一变量viewport
		new Ext.Viewport({
			layout:'border',
			height:400,
			//renderTo:'roleGrid',
			border:false,
			items:[queryRForm,roleGrid]
		});
		
	});


</script>
</head>
<body>

</body>
<div id="queryRForm"></div>
<div id="roleGrid"></div>
</html>